<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>1.computed 计算属性</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script>
    // 创建一个vue实例
    const app = Vue.createApp({
      data() {
        return {
          message: 'hello World',
          count: 10,
          price: 20
        }
      },
      // 只有相关联的属性发生改变computed中的值才会改变
      computed: {
        total() {
          return Date.now() + this.count
        }
      },
      mounted() {
      },
      methods: {
        handleClick() {
          this.message = '哈哈'
        },
        // 只要页面刷新这里的值就会更新这是和computed的区别
        getTotal() {
          return Date.now() + this.count
          // return this.count * this.price
        }
      },
      template:'<div @click="handleClick"><span>{{message}}-{{total}}</span><hr/><span>{{message}}-{{getTotal()}}</span></div>'
    })
    // 挂载到root的id元素上
    const vm = app.mount('#root')
    // 在控制台可以通过vm来访问它如vm.$data.message或vm.message
  </script>
</html>